<script setup>
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import api from '@/apis'
const { t } = useI18n()
const show = ref(false)
const dateSelect = ref([
  {
    text: '近一个月',
    value: '1'
  },
  {
    text: '近三个月',
    value: '2'
  },
])
const showPopover = ref(false)
const showPopover2 = ref(false)
</script>
<template>
  <div class="record p-30">
    <div class="flex items-center rounded-[10101px] bg-[#fff]/10 px-18 py-10">
      <div class="flex items-center justify-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 39 40" fill="none">
          <path
            d="M19.413 6.86646C16.8808 6.86646 14.4055 7.61735 12.3 9.02418C10.1945 10.431 8.55349 12.4306 7.58445 14.7701C6.61541 17.1095 6.36187 19.6838 6.85588 22.1674C7.34989 24.651 8.56928 26.9323 10.3598 28.7228C12.1504 30.5134 14.4317 31.7328 16.9153 32.2268C19.3988 32.7208 21.9731 32.4673 24.3126 31.4982C26.6521 30.5292 28.6517 28.8882 30.0585 26.7827C31.4653 24.6772 32.2162 22.2019 32.2162 19.6696C32.2162 17.9883 31.8851 16.3234 31.2416 14.7701C30.5982 13.2167 29.6551 11.8053 28.4663 10.6164C27.2774 9.42753 25.866 8.48446 24.3126 7.84104C22.7593 7.19762 21.0944 6.86646 19.413 6.86646ZM19.413 26.7718C19.1321 26.7718 18.8575 26.6885 18.6239 26.5325C18.3903 26.3764 18.2082 26.1545 18.1007 25.895C17.9932 25.6354 17.9651 25.3498 18.0199 25.0743C18.0747 24.7987 18.21 24.5456 18.4086 24.347C18.6073 24.1483 18.8604 24.0131 19.1359 23.9582C19.4115 23.9034 19.6971 23.9316 19.9566 24.0391C20.2162 24.1466 20.438 24.3287 20.5941 24.5622C20.7502 24.7958 20.8335 25.0705 20.8335 25.3514C20.8186 25.7181 20.6624 26.0647 20.3976 26.3188C20.1328 26.5728 19.78 26.7146 19.413 26.7143V26.7718ZM20.1233 21.0133C20.1233 21.8003 19.7969 22.4337 19.413 22.4337C19.0291 22.4337 18.7028 21.8003 18.7028 21.0133L17.9158 14.5445C17.9158 14.1678 18.0655 13.8065 18.3319 13.5401C18.5982 13.2737 18.9595 13.1241 19.3363 13.1241C19.713 13.1241 20.0743 13.2737 20.3407 13.5401C20.607 13.8065 20.7567 14.1678 20.7567 14.5445L20.1233 21.0133Z"
            fill="#F76938" />
        </svg>
      </div>
      <div class="text-[#fff] text-[20px] font-HarmonyOS font-400 line-height-36px ml-6">
        认购获得的股票处于锁仓状态，可在券商处查看您的股票资产
      </div>
    </div>
    <div class="mt-30px flex items-center">
      <div class="w-10px h-32px bg-[#F76938] rounded-[154px]"></div>
      <div class="text-32px text-[#FFFFFF] font-700 font-roboto line-height-32px ml-12px">
        历史记录
      </div>
    </div>
    <div class="flex items-center justify-between mt-34px">
      <div class="flex items-center gap-60px">
        <van-popover v-model:show="showPopover" theme="dark" :actions="dateSelect" :show-arrow="false">
          <template #reference>
            <div class="flex items-center">
              <div class=" mr-10px text-[#FFFFFF99] text-[24px] font-HarmonyOS font-500 line-height-[40px]">
                全部类型
              </div>
              <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 21 20" fill="none">
                <path
                  d="M3.8795 3.89844H17.9133C18.6899 3.89844 19.318 4.52167 19.318 5.29835C19.318 5.65938 19.1794 5.98596 18.957 6.23335L12.0169 15.4936C11.5519 16.1069 10.6763 16.2357 10.058 15.7706C9.94921 15.6915 9.85519 15.5973 9.781 15.4935L2.7615 6.13452C2.30159 5.5211 2.42523 4.64077 3.04347 4.18059C3.29586 3.9876 3.5877 3.89858 3.8795 3.89858V3.89844Z"
                  fill="white" fill-opacity="0.5" />
              </svg>
            </div>
          </template>
        </van-popover>
        <van-popover v-model:show="showPopover" theme="dark" :actions="dateSelect" :show-arrow="false">
          <template #reference>
            <div class="flex items-center">
              <div class=" mr-10px text-[#FFFFFF99] text-[24px] font-HarmonyOS font-500 line-height-[40px]">
                全部状态
              </div>
              <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 21 20" fill="none">
                <path
                  d="M3.8795 3.89844H17.9133C18.6899 3.89844 19.318 4.52167 19.318 5.29835C19.318 5.65938 19.1794 5.98596 18.957 6.23335L12.0169 15.4936C11.5519 16.1069 10.6763 16.2357 10.058 15.7706C9.94921 15.6915 9.85519 15.5973 9.781 15.4935L2.7615 6.13452C2.30159 5.5211 2.42523 4.64077 3.04347 4.18059C3.29586 3.9876 3.5877 3.89858 3.8795 3.89858V3.89844Z"
                  fill="white" fill-opacity="0.5" />
              </svg>
            </div>
          </template>
        </van-popover>
        <van-popover v-model:show="showPopover" theme="dark" :actions="dateSelect" :show-arrow="false">
          <template #reference>
            <div class="flex items-center">
              <div class=" mr-10px text-[#FFFFFF99] text-[24px] font-HarmonyOS font-500 line-height-[40px]">
                正序
              </div>
              <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 21 20" fill="none">
                <path
                  d="M3.8795 3.89844H17.9133C18.6899 3.89844 19.318 4.52167 19.318 5.29835C19.318 5.65938 19.1794 5.98596 18.957 6.23335L12.0169 15.4936C11.5519 16.1069 10.6763 16.2357 10.058 15.7706C9.94921 15.6915 9.85519 15.5973 9.781 15.4935L2.7615 6.13452C2.30159 5.5211 2.42523 4.64077 3.04347 4.18059C3.29586 3.9876 3.5877 3.89858 3.8795 3.89858V3.89844Z"
                  fill="white" fill-opacity="0.5" />
              </svg>
            </div>
          </template>
        </van-popover>
      </div>
      <van-popover v-model:show="showPopover2" theme="dark" :actions="dateSelect" :show-arrow="false">
        <template #reference>
          <div class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="18" viewBox="0 0 39 36" fill="none">
              <path
                d="M32.1154 10.045C32.312 9.86058 32.533 9.65249 32.6765 9.41491C33.7522 8.15958 33.8807 6.25946 32.9781 4.88045C32.0689 3.49143 30.7212 2.78711 28.9727 2.78711H7.3326C6.91326 2.78711 6.47993 2.78711 6.10258 2.89898C5.17863 3.10907 4.33333 3.62242 3.72071 4.34587C3.09669 5.08243 2.75311 5.99297 2.75311 6.90964C2.75311 8.09915 3.23528 9.15334 4.11129 9.87946C6.89389 12.4055 9.67199 15.0161 12.3602 17.5433V25.8842L12.3648 25.9544C12.5109 27.0527 13.3984 27.6526 14.4726 27.2189L14.4913 27.2106C15.0725 26.9376 15.4057 26.3876 15.4057 25.7018V17.1268C15.4057 16.548 15.2159 16.076 14.8415 15.724C13.4988 14.4616 12.1758 13.1497 10.8966 11.8808C9.57771 10.5727 8.21381 9.22 6.78831 7.87995L6.71849 7.81364L6.63435 7.77462C6.61452 7.76182 6.57077 7.70818 6.53756 7.66718C6.5011 7.62278 6.46557 7.58077 6.42825 7.54245C6.18209 7.24598 6.13018 6.99401 6.24511 6.65402C6.44492 6.22891 6.84561 5.74104 7.33242 5.74104H29.1666C29.4325 5.74104 29.6888 5.87604 29.8882 6.1214C30.1469 6.43984 30.2431 6.86088 30.1367 7.22843C30.0824 7.43178 29.9922 7.52389 29.7195 7.78074C26.7129 10.5157 23.8411 13.2152 20.8007 16.0731L20.7846 16.0885C20.4765 16.3777 20.1231 16.7987 20.1231 17.4915V31.9052C20.1231 32.0824 20.1231 32.5818 20.5113 32.9814C20.5113 32.9814 20.6293 33.2316 21.1376 33.4133C21.7659 33.6378 22.3797 33.3821 22.3797 33.3821L22.5399 33.2694C23.1686 32.8259 23.1686 32.1353 23.1686 31.7225V18.0907C24.672 16.6808 26.2298 15.3093 27.7373 13.9823C29.2725 12.6313 30.7222 11.3549 32.1154 10.045H32.1154ZM35.4744 28.512H27.2257C26.364 28.512 25.8489 29.1703 25.8489 29.8068V30.172C25.8489 30.9824 26.5488 31.4665 27.2257 31.4665H35.4744C36.3366 31.4665 36.8516 30.8084 36.8516 30.172V29.8068C36.8516 29.0324 36.2982 28.512 35.4744 28.512V28.512ZM35.4744 23.8599H27.2257C26.364 23.8599 25.8489 24.5182 25.8489 25.1547V25.4279C25.8489 26.2386 26.5488 26.7229 27.2257 26.7229H35.4744C36.3366 26.7229 36.8516 26.0646 36.8516 25.4279V25.1547C36.8516 24.5182 36.3366 23.8599 35.4744 23.8599ZM35.4744 19.3899H27.2257C26.364 19.3899 25.8489 20.0482 25.8489 20.6847V20.8672C25.8489 21.6773 26.5488 22.1616 27.2257 22.1616H35.4744C36.3366 22.1616 36.8516 21.5035 36.8516 20.8672V20.6847C36.8516 19.9102 36.2982 19.3899 35.4744 19.3899Z"
                fill="white" fill-opacity="0.5" />
            </svg>
          </div>
        </template>
      </van-popover>
    </div>
    <div class="flex flex-col gap-30px mt-16px">
      <div class="p-30px rounded-[16px] bg-[#272727] flex" v-for="(value, index) in 10" :key="index">
        <div>
          <img src="/src/assets/icon/public/logo_full.png" class="w-60 h-60" />
        </div>
        <div class="ml-20px flex flex-col gap-12px">
          <div class="text-[30px] text-[#fff] font-HarmonyOS font-900">+5566661X</div>
          <div class="text-[24px] text-[#F76938] font-HarmonyOS font-500">类型：入金收益</div>
          <div class="text-[22px] text-[#9C9C9C] font-HarmonyOS font-500">2025-10-10 10:00:00</div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.record {
  width: 100%;
  min-height: 100vh;
  background: #101010;
}
</style>
